<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=414,user-scalable=0">
    <title>里程表数字滚动效果 Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
        }

        .container {
            margin: 100px auto;
        }

        .container div {
            margin-left: 10px;
            display: block;
            height: 60px;
            border: 1px solid goldenrod;
            margin-top: 10px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
<div class="container">
    <h2>不循环样式</h2>
    <div class="scroll-number-0"></div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="gScrollNumber.js"></script>

<script>
    /**
     * 初始化一个数字滚动对象
     * 构造函数的参数项可查看 gScrollNumber.js 里面的注释
     */
    var scrollNumber0 = new gScrollNumber(".scroll-number-0", {
        width: 30, // 每个数字元素的宽
        color: "orange", // 数字元素的字体颜色
        fontSize: 40, // 数字元素的字体大小
        autoSizeContainerWidth: true, // 自动计算容器宽度 .scroll-number-0 ，如果已经使用css 制定了容器的宽度，此处可设置为false
        background: "#333",
    });

    var value0;
    value0 = 1023571;
    scrollNumber0.run(value0+=4302);

    setInterval(function() {
        scrollNumber0.run(value0+=4302);
    }, 3000);
</script>
</body>
<script>
    function gScrollNumber(el,option) {
        this.container = $(el);
        this.option = option;
        this.container.css({
            position: "relative",
            padding: "0",
            overflow: "hidden"
        });
        var height = this.container.height();
        this.subWidth = option.width;
        this.subHeight = height;
        this.autoSizeContainerWidth = option.autoSizeContainerWidth;
        this.background=option.background;
        this.col = '<span class="g-num-item" style="top: 0;">' +
            '<i>0</i>' +
            '<i>1</i>' +
            '<i>2</i>' +
            '<i>3</i>' +
            '<i>4</i>' +
            '<i>5</i>' +
            '<i>6</i>' +
            '<i>7</i>' +
            '<i>8</i>' +
            '<i>9</i>' +
            '<i>.</i>' +
            '</span>';
    }
    gScrollNumber.prototype.run = function (value) {
//  console.log("old = " + this.currentValue + "\nnew = " + value);
        this.currentValue = value;
        var self = this;
        var valueString = value.toString();
        if (self.autoSizeContainerWidth) {
            self.container.css({
                "width": valueString.length * self.subWidth + "px"
            });
        }
        var oldLength = self.container.children(".g-num-item").length;

        if (valueString.length > oldLength) {
            for (var i = 0; i < valueString.length - oldLength; i++) {
                self.container.append(self.col);
                self.container.children(".g-num-item").eq(oldLength + i).css({
                    right: self.subWidth * (oldLength + i) + "px"
                });
            }
        }else if (valueString.length < oldLength) {
            for (var i = 0; i < oldLength - valueString.length; i++) {
                self.container.children(".g-num-item:last").remove();
            }
        }
        $(".g-num-item").css({
            position: "absolute",
            width: self.subWidth + "px",
            height: 11 * self.subHeight + "px"
        });
        $(".g-num-item i").css({
            width: self.subWidth + "px",
            height: self.subHeight + "px",
            lineHeight: self.subHeight + "px",
            textAlign: "center",
            fontSize: self.option.fontSize + "px",
            color: self.option.color,
            display: "block",
            fontStyle: "normal",
            background:self.background,//梁涛新增background属性
        });
        setTimeout(function () {
            if (valueString.length !== self.container.children(".g-num-item").length) {
                console.log("%c%s","color:red;", "数字位数和数字条个数不相等");
                debugger
            }
            for (var i = 0; i < valueString.length; i++) {
                var y = 0;
                if (valueString[i] != ".") {
                    y = - (parseInt(valueString[i]) * self.subHeight);
                }else {
                    y = - (10 * self.subHeight);
                }
                // console.log(self.container.attr("class") + " / " + self.container.attr("id") + " : " +valueString);
                self.container.children(".g-num-item").eq(valueString.length - i - 1).css({
                    top: y + "px",
                    transition: "top 1.0s"
                })
            }
        }, 0);
    };
    gScrollNumber.prototype.getCurrentValue = function () {
        return this.currentValue;
    };
</script>
</html>